<!--加上setup 允许在script中直接编写组合式api-->
<script>
export default {
  // 1. setup的执行时机比beforeCreate还要早
  // 2. 由于执行时机太早了，所以不能使用this  this-》undefined
  // 3. 数据和函数，需要在setup 最后return，才能在模板中应用
  setup() {
    console.log("setup函数执行了", this)
    const message = "4324"
    const testStr = 'sssss'
    const upperStr = () => {
      return testStr.toUpperCase()
    }
    const changeStr = () =>{
      // testStr.toUpperCase()
      console.log(testStr.toUpperCase())
    }
    // 每次都需要return 特别麻烦， 可以使用语法糖
    return {
      testStr,
      upperStr,
      message,
      changeStr
    }
  },
  beforeCreate() {
    console.log("beforeCreate函数执行了")
  }
}
</script>

<template>
  <header>{{ testStr }}</header>
  <body>{{ upperStr() }} - {{message}}
  <div>
    <button @click="changeStr">修改字符串</button>
  </div>
  </body>
</template>
